<template>
    <div class="header-section">
        <div class="account-login">
            <div class="system-info" @click="lookSysInfo()" :class="{'active':active}">
                <i id="set-icon" class="fa fa-bell"></i>
                <label for="set-icon">系统消息</label>
            </div>
            <div class="account">
                <i id="account-icon" class="fa fa-user"></i>
                <label for="account-icon">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">{{username}}<i
                                class="el-icon-arrow-down el-icon--right"></i></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="quit">退出</el-dropdown-item>
                            <el-dropdown-item command="other">其他</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </label>
            </div>
        </div>
    </div>
</template>

<script>
    import UserService from '@/services/http/user.service'

    export default {
        name: "HeaderMenu",
        data() {
            return {
                username: ''
            }
        },
        computed: {
            active() {
                return this.$store.state.menuStore.sysInfoActive;
            }
        },
        methods: {
            lookSysInfo() {
                this.$store.commit('setMenuFalse', {vm: this});
                this.$store.state.menuStore.sysInfoActive = true;
                this.$router.push({name: 'SysInfoNotice'});
            },
            loginOut() {
                this.$router.push({name: 'Login'});
            },
            handleCommand(command) {
                command === 'quit' ? this.loginOut() : null;
            },
            getUser() {
                UserService.getUser().then(res => {
                    if (res.status === 200) {
                        let userInfo = res.data.userInfo;
                        this.$store.state.username = this.username = userInfo.username;
                    }
                })
            }
        },
        mounted() {
            this.getUser();
        }
    }
</script>

<style lang="scss">
    @import "src/common/common.style";
    .header-section {
        height: 50px;
        @include bgImg("bg-title.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #017dff;
        font-size: $font-xs;
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px;
        i {
            font-style: $font-md;
        }
        label {
            margin-left: 5px;
            cursor: pointer;
        }
        .account-login {
            display: flex;
            justify-content: space-between;
            align-items: center;
            i {
                font-size: $font-md;
            }
            .system-info,
            .account {
                height: 50px;
                line-height: 50px;
                padding: 0 20px;
                &:hover, &.active {
                    background-color: #017dff;
                    color: #ffffff;
                }
            }
        }
    }
</style>
